<template>
  <div class="redeem-code-center">
    <c-title text="兑换码"></c-title>
    <div class="header">
      <span class="btn-bg binding" @click="code_handle('binding')">绑定兑换码</span>
      <span class="btn-text binding" @click="$router.push(fun.getUrl('redeem_code_history'))">历史记录</span>
    </div>
    <van-tabs v-model="active" @click="change" title-active-color='var(--themeBaseColor)' color="var(--themeBaseColor)">
      <van-tab title="最新获得"></van-tab>
      <van-tab title="即将过期"></van-tab>
      <van-tab title="商品兑换"></van-tab>
      <van-tab title="身份兑换"></van-tab>
      <van-tab :title="integral+'兑换'"></van-tab>
    </van-tabs>

    <div class="list">
      <div class="list-item" v-for="item in list" :key="item.id">
        <div class="left">
          <span class="tips">{{ item.type == 1 ? '商品兑换' : item.type==2?'身份兑换':item.type_name }}</span>
          <div>
            <p class="name">{{ item.name }}</p>
            <p class="time">{{ item.active_start }}至{{ item.active_end }}</p>
            <p v-if="item.type == 1" class="goods-number">可兑换 {{ item.exchange_limit }} 件商品，已兑换 {{ item.has_exchange }} 件，剩余 {{
              item.exchange_limit
                - item.has_exchange
            }} 件</p>
          </div>
        </div>
        <div class="right">
          <div class="line"></div>

          <div v-if="item.can_use!==0" style="display: flex; flex: 1; flex-direction: column; justify-content: center;">
            <span class="btn-bg use" @click="link(item)">去使用</span>
            <span v-if="item.can_tranfer" class="btn-text use mt18" @click="code_handle('Donation', item)">转赠</span>
          </div>
          <div v-else  style="display: flex; flex: 1;align-items:center;justify-content:center;color:var(--themeBaseColor)">
            {{item.status_name}}
          </div>
        </div>
      </div>
    </div>

    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <p class="center fz32 pop-title">{{ type == 'binding' ? '绑定兑换码' : '转赠' }}</p>
          <input v-if="type == 'binding'" v-model="code_id" type="text" placeholder="请输入兑换码" class="input" />

          <template v-if="type == 'Donation'">
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <span style="flex-shrink: 0; margin-right: 0.5938rem; font-size: 0.75rem;">转入会员</span>
              <input type="text" v-model="keyword" class="input" placeholder="请输入会员ID/手机号" @input="input_handle">
            </div>
            <div style="position: relative; width: 100%;"
              v-if="member_list && member_list.length !== 0 && show_member_flag">
              <div class="box">
                <div class="member-dialog">
                  <div @click="choose_handle(item)" v-for="(item, i) in member_list" :key="i" class="member-dialog-item">
                    <span >{{ item.nickname }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="popup-name">
              <img v-if="avatar" style="width: 2.25rem;height: 2.25rem;margin: 0 0.1875rem 0 0;border-radius: 100%;" :src="avatar" />
              <span v-if="nickname" style="color:#101010">昵称：{{ nickname }}</span>
              <span v-if="name" style="margin-top: 0.1rem;color:#101010">姓名：{{ name }}</span>
              <span v-if="show_tips">会员不存在</span>
            </div>
          </template>
          <div class='pop-button'>
            <span class="close" @click="(show = false)">取消</span>
            <span class="btn-bg" @click="confirm">{{ type== 'binding' ? '绑定' : '转赠'}}</span>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import center_controller from './center_controller';
export default center_controller
</script>

<style scoped lang="scss">
::v-deep .van-tabs__nav {
  background: none;
}

.redeem-code-center {
  .box {
    width: 100%;
    height: 8.4063rem;
    position: absolute;

    &::after {
      content: "";
      position: absolute;
      right: 1rem;
      top: 0.1563rem;
      width: 0.3rem;
      height: 0.3rem;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      background: #fff;
      border-right: 1px solid rgba(0, 0, 0, 0.1);
      transform: rotate(-45deg) translateY(70%);
    }
  }
  .member-dialog-item{
    display: flex;
    align-items: center;
      border-bottom: 1px solid #e7e7e7;
  }
  .member-dialog {
    width: 75%;
    height: 8.4063rem;
    overflow: scroll;
    position: absolute;
    margin-top: 0.5rem;
    background: #fff;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 0.3125rem 1.25rem;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;

    span {
      padding: 0.75rem 0;
      text-align: center;
      margin-left: 0.25rem;
      font-size: 0.75rem;
    }
  }

  .popup-name {
    display: flex;
    align-items: center;
    // flex-direction: column;
    font-size: 0.625rem;
    color: #f15353;
    margin-top: 0.5313rem;
    // margin-bottom: 0.875rem;
    text-align: left;
    margin-left: 3.4375rem;
    font-size: 0.75rem;
  }

  .pop-button {
    margin-top: 1.375rem;
    display: flex;
    justify-content: space-between;
    padding: 0 3rem;

    .btn-bg {
      width: 3.75rem;
      height: 1.5625rem;
      line-height: 1.5625rem;
    }
  }

  .close {
    background: #c1c1c1;
    width: 3.75rem;
    height: 1.5625rem;
    line-height: 1.5625rem;
    border-radius: 0.1875rem;
    color: #fff;
    font-size: 0.6875rem;
  }

  .pop-title {
    margin-bottom: 1.5rem;
  }

  .input {
    padding: 0.5rem 0.75rem;
    // margin-top: 1.5rem;
    border: 1px solid #afafaf;
    border-radius: 0.1875rem;
    width: 100%;
    // margin-bottom: 2.375rem;
  }

  .center {
    text-align: center;
  }

  .fz32 {
    font-size: 1rem;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 17.5rem;
    background: #fff;
    border-radius: 4px;
    padding: 1.3125rem 0.9375rem 0.9375rem;
  }

  .goods-number {
    color: #f15353;
    font-size: 0.625rem;
    text-align: left;
  }

  .time {
    color: #979797;
    font-size: 0.625rem;
    text-align: left;
    margin: 0.1rem 0 0.2rem;
  }

  .name {
    color: #333;
    font-size: 0.8125rem;
    text-align: left;
  }

  .left {
    position: relative;
    padding: 1.3rem 0.9375rem 0.437rem 0.625rem;
  }

  .tips {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.625rem;
    color: #8c5b00;
    padding: 0.1rem 0.2813rem 0.21em 0.31rem;
    border-radius: 0 0 0.4rem 0;
    background: #fdd845;
  }

  .right {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.625rem;
    flex-shrink: 0;
  }

  .mt18 {
    margin-top: 0.5625rem;
  }

  .line {
    position: absolute;
    width: 3px;
    left: 0;
    height: 3.3438rem;
    border-left: 1px dotted #afafaf;
  }

  .list-item {
    display: flex;
    justify-content: space-between;
    border-radius: 0.5625rem;
    overflow: hidden;
    background: #fff;
    margin-bottom: 0.625rem;
  }

  .list {
    padding: 0.7rem 0.625rem 1rem;
  }

  .binding {
    font-size: 0.75rem;
    padding: 0.5625rem 1.2188rem;
  }

  .use {
    width: 2.8125rem;
    height: 1.3125rem;
    line-height: 1.3125rem;
    font-size: 0.625rem;
  }

  .btn-bg {
    background: var(--themeBaseColor);
    color: #fff;
    border-radius: 0.1875rem;
  }

  .btn-text {
    color: var(--themeBaseColor);
    border-radius: 0.1875rem;
    border: 1px solid var(--themeBaseColor);
  }

  .header {
    display: flex;
    justify-content: space-between;
    padding: 0.9375rem 4.0625rem 0.0938rem;
  }
}
</style>
